<template>
  <view>
    <view class="container">
      <view v-for="(item, index) in listdata.data" :key="index">
        <view class="info-card horizontal">
          <view class="item-field">
            <text class="label">产品名称: </text>
			
			<view class="item-field">
				<text class="value">{{ item.name }}</text>
			</view>
			 <button class="value1" @click="open(item)">核销</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as productApi from '@/api/product/index.js'
  export default {
    data() {
      return {
        listdata: []
      };
    },
    onLoad() {
      this.getList();
    },
    methods: {
      async getList() {
        try {
          this.listdata = await productApi.getProductfree();
          console.log('查询到的所有商品', this.listdata.data);
        } finally {
          // 这里可以添加一些清理代码，如果需要的话
        }
      },
	       open(data){
	         uni.navigateTo({
	           //将产品信息对象转换为JSON格式传递到下一个页面
	           url: `/pages/free/login?data=${JSON.stringify(data)}`
	         });
	       }
	     }
	   };
</script>

<style>
  .container {
    padding: 20px;
    background-color: #f5f5f5;
  }

  .info-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .info-card.horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .item-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .label {
    font-size: 15px;
    color: #333333;
    margin-bottom: 5px;
  }

  .value {
    font-size: 13px;
    color: #007aff;
  }

  .value1 {
	margin-left: 1%;
    font-size: 13px;
    color: #007aff;
  }

  .custom-button {
    background-color: #007aff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    padding: 5px 10px; /* 内边距 */
    font-size: 13px; /* 字体大小 */
    cursor: pointer; /* 鼠标样式 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }

  .custom-button:hover {
    background-color: #005bb5; /* 悬停时的背景颜色 */
  }
</style>
